<template>
    <div class="mains">
        <!-- 头部 -->
        <div class="top">
            <div class="left">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F11%2F20200411222736_oenml.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681305377&t=926978ecbc4cf5958ffd9de62e65ce21" alt="">
            </div>
            <div class="right">
                <span>{{data.list.account}}</span>
            </div>
        </div>
        <ul>
            <li>
                <span>{{data.list.collectionNumber}}</span>
                <p>收藏</p>
            </li>
             <li>
                <span>{{data.list.likeNumber}}</span>
                <p>关注</p>
            </li>
             <li>
                <span>{{data.list.score}}</span>
                <p>积分</p>
            </li>
             <li>
                <span>{{data.list.couponNumber}}</span>
                <p>优惠券</p>
            </li>
            
        </ul>
    </div>
</template>
<script lang="ts" setup>
import {ref,reactive} from 'vue'
import {getUserInfo} from '@/utils/api'
const data=reactive({
    list:[]
})
 getUserInfo().then(res=>{
    console.log(res);
    data.list=res.data
    
 })
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.mains{
    height: 100vh;
    padding: 30px 20px; background-image: linear-gradient(#ffc0cb,#f6f7f9, #fff);
}
.left{
    /* width: 50px;
    height: 50px;
    border-radius: 50%; */
    margin: 10px;
}
.top{
    display: flex;
   

}
.left>img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.right{
    padding: 8px 0;
    box-sizing: border-box;
}
ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
    align-items: center;
    text-align: center;
}
ul p{
   font-size: 12px !important;
   color:#999;
    
}
</style>

